<script>
import { getCategories } from '@/api'

export default {
  name: 'About',
  data() {
    return {
      //树的原始数据
      treeData: [],
      defaultProps: {
        children: 'children', // 子节点属性名称
        label: 'name', // 节点显示名称的字段
      },
    }
  },
  methods: {
    async fetchCategories() {
      try {
        const res = await getCategories()
        this.treeData = res.data
        console.log('结果是!!!!!!!!!!!!!!!!!', this.treeData)
      } catch (e) {
        console.log(e)
      }
    },
    handleNodeClick(data, node, elementNode) {
      console.log('data, node, elementNode', data, node, elementNode)
      console.log('返回被选中(点击)的节点:', node.data.name)
    },
  },
  created() {
    this.fetchCategories()
  },
}
</script>

<template>
  {{ treeData }}
  <el-tree
    ref="treeRef"
    style="max-width: 600px"
    :data="treeData"
    show-checkbox
    default-expand-all
    node-key="id"
    highlight-current
    :props="defaultProps"
    @node-click="handleNodeClick"
  />
</template>

<style scoped></style>
